<template>
	<view class="container">
		<view class="user-card" :class="[isVip ? 'user-card-vip' : 'user-card-unvip']">
			<view class="user-card-top">
				<view class="user-card-top-left" v-if="!isGuest">
					<view class="avatar" @tap="changeAvatar"><image :src="userLogo" class="avatar-img"></image></view>
					<view class="user-info">
						<text class="user-info-nickname" @tap="changeUserName">{{ userName }}</text>
						<text class="user-info-end-datetime" v-if="isVip">{{ vipEndDate }}</text>
						<view class="school-name">{{schoolName}}</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button type="primary" class="user-card-top-left btn" lang="zh_CN" open-type="getUserInfo" @getuserinfo="getuserinfo" v-else>
					<view class="avatar"><image :src="userLogo" class="avatar-img"></image></view>
					<view class="user-info">
						<text class="user-info-nickname">点击登录</text>
						<view class="school-name">{{schoolName}}</view>
					</view>
				</button>
				<!-- #endif -->
				<view class="user-card-top-right" v-if="isVip"><text class="vip-info">vip会员</text></view>
			</view>
		</view>
		<yxylMenu :type="menuType" :menuList="menuList"></yxylMenu>
		<view class="feedBack"><view @tap="getUserSN">我的ID</view></view>
		<uni-popup ref="popupAvatar" type="top">
			<view class="popupBg">
				<view class="changeAvatar-item title">修改头像</view>
				<view class="changeAvatar-item" @tap="chooseAvatar(1)">拍照</view>
				<view class="changeAvatar-item" @tap="chooseAvatar(2)">从手机相册选择</view>
				<view class="changeAvatar-item close" @tap="closePopupAvatar">关闭</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupUserName" type="top">
			<view class="popupBg">
				<view class="popupUserName-item title">修改昵称</view>
				<input type="text" class="popupUserName-item input" v-model="userName" placeholder="输入新的昵称" />
				<view class="popupUserName-item btns">
					<view class="btn" @tap="closePopupUserName">关闭</view>
					<view>|</view>
					<view class="btn" @tap="updateUserName">确定</view>
				</view>
			</view>
		</uni-popup>

		<!-- #ifdef MP-WEIXIN -->
		<yxylBindPhone v-if="needPhone"></yxylBindPhone>
		<!-- #endif -->
	</view>
</template>

<script>
import { WZCSDX } from '../../dxType.js'
import yxylMenu from '@/components/yxyl-menu/yxyl-menu.vue';
import { MappAuthLogin } from '@/api/login.js';
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
import { upload } from '@/common/upload.js';
// #ifdef MP-WEIXIN
import yxylBindPhone from '@/components/yxyl-bind-phone/yxyl-bind-phone.vue';
// #endif
import { mapMutations } from 'vuex';
export default {
	components: {
		yxylMenu,
		uniPopup,
		// #ifdef MP-WEIXIN
		yxylBindPhone
		// #endif
	},
	data() {
		return {
			isVip: false,
			isGuest: true,
			userName: '匿名用户',
			userLogo: 'http://img-ali.cnyanglao.com/userlogo.png-w100',
			vipEndDate: null,
			menuList: [],
			needPhone: false,
			isIOS: false,
			// 学籍
			schoolName: ''
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		this.isIOS = uni.getSystemInfoSync().platform == 'ios';
		// #endif

		var that = this;
		this.getMenu().then(() => {
			// #ifdef H5
			this.$wechat.share({
				link: this.$handlerAppMessagePath()
			});
			// #endif
		});
	},
	onShareAppMessage(e) {
		return {
			path: this.$handlerAppMessagePath()
		};
	},
	onPullDownRefresh() {
		this.getMenu().then(() => {
			uni.stopPullDownRefresh();
		});
	},
	mounted() {
		var that = this;
		this.intervalID = setInterval(function() {
			that.adIndex = that.adIndex + 1;
		}, 5000);
	},
	computed: {
		menuType(){
			if(this.$store.state.common.appid == WZCSDX.appid){
				return 'grid'
			}else{
				return 'list'
			}
		}
	},
	methods: {
		...mapMutations('user', ['login', 'logout', 'removeSessionId']),
		getMenu() {
			var that = this;
			return this.$http
				.request({
					url: 'api/UcenterApi/GetUcenter'
				})
				.then(res => {
					if (res.logo) {
						that.isGuest = false;
						that.userLogo = res.logo;
						that.userName = res.userName;
					}
					if(res.schoolName){
						that.schoolName = res.schoolName
					}
					that.isVip = res.isVip;
					that.vipEndDate = res.vipEndDate;
					that.menuList = res.ucenterItem;
					if (res.logo && !res.telephone) {
						that.needPhone = true;
					}
				});
		},
		changeAvatar() {
			this.$refs.popupUserName.close();
			uni.hideTabBar();
			this.$refs.popupAvatar.open();
		},
		closePopupAvatar() {
			uni.showTabBar();
			this.$refs.popupAvatar.close();
		},
		chooseAvatar: function(type) {
			var sourceType = [];
			if (type == 1) {
				sourceType.push('camera');
			} else if (type == 2) {
				sourceType.push('album');
			}
			var that = this;
			uni.chooseImage({
				sourceType: sourceType,
				success(res) {
					upload(1, res.tempFilePaths).then(newAvatar => {
						that.closePopupAvatar();
						that.updateUserInfo({ logo: newAvatar[0] });
					});
				}
			});
		},
		changeUserName() {
			this.$refs.popupAvatar.close();
			uni.hideTabBar();
			this.$refs.popupUserName.open();
		},
		closePopupUserName() {
			uni.showTabBar();
			this.$refs.popupUserName.close();
		},
		updateUserName() {
			this.closePopupUserName();
			this.updateUserInfo({ userName: this.userName });
		},
		updateUserInfo(userInfo) {
			var that = this;
			this.$http
				.request({
					url: 'api/UcenterApi/UpdateUserNameOrLogo',
					method: 'POST',
					data: userInfo
				})
				.then(() => {
					that.getMenu();
				});
		},
		// #ifdef MP-WEIXIN
		getuserinfo: async function(e) {
			var that = this;
			if (e.detail.errMsg === 'getUserInfo:ok') {
				var [fail, success] = await uni.checkSession();
				var code = '';
				var errMsg = '';
				if (fail || !that.$store.state.user.sessionId) {
					var [error, loginRes] = await uni.login({
						provider: 'weixin'
					});
					code = loginRes.code;
					errMsg = loginRes.errMsg;
				}
				if (success || errMsg === 'login:ok') {
					var authRes = await MappAuthLogin({
						AuthProvider: 'WeChatMiniProgram',
						ProviderAccessCode: JSON.stringify({
							appId: that.$store.state.common.appid,
							code: code,
							sessionId: that.$store.state.user.sessionId,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						})
					}).catch(() => {
						that.removeSessionId();
						uni.showToast({
							title: '请重新点击登录',
							duration: 3000,
							icon: 'none'
						});
					});
					if (authRes) {
						this.login({
							token: authRes.accessToken,
							clientUserId: authRes.clientUserId,
							userName: authRes.userName,
							sessionId: authRes.sessionId,
							isAdmin: authRes.isAdmin,
							canDiscuss: authRes.canDiscuss,
							miniProgramTitle: authRes.miniProgramTitle,
							clientUserName: authRes.clientUserName
						});
					}
					that.getMenu();
				}
			}
		},
		// #endif
		getUserSN() {
			var that = this;
			uni.showModal({
				title: '用户标识',
				content: this.$store.state.user.clientUserId,
				showCancel: false,
				confirmText: '复制',
				success() {
					uni.setClipboardData({
						data: that.$store.state.user.clientUserId
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.user-card {
	width: 90%;
	margin: 0 auto;
	height: 200rpx;
	border-radius: 10px;
	&.user-card-vip {
		background: linear-gradient(to bottom right, #ff8e7b, #ee5d56);
	}
	&.user-card-unvip {
		background: linear-gradient(to bottom right, #e7e8ef, #bdbfca);
	}
	.user-card-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 200rpx;
		.user-card-top-left {
			height: 100%;
			display: flex;
			align-items: center;
			.avatar {
				width: 20vw;
				height: 20vw;
				position: relative;
				margin-left: 20rpx;
				.avatar-img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.user-info {
				display: flex;
				height: 80%;
				flex-direction: column;
				justify-content: space-around;
				color: #fff;
				margin-left: 30rpx;
				.user-info-end-datetime {
					font-size: 24rpx;
					color: #f8f8f8;
				}
				.school-name{
					font-size: 23rpx;
				}
				.user-info-progress{
					font-size: 23rpx;
					span{
						color: #ffc107;
					}
				}
			}
		}
		.user-card-top-right {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			color: #ffc107;
			.vip-info {
				margin: 30rpx 50rpx 0 0;
				font-size: 34rpx;
			}
		}
	}
	.user-card-bottom {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		.user-card-bottom-left {
			text-align: left;
			color: #fff;
			padding-left: 40rpx;
			font-size: 30rpx;
			flex-basis: 60%;
			flex-grow: 0;
			flex-shrink: 0;
			overflow: hidden;
			text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
			display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
			-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
			-webkit-line-clamp: 2; /* 文本需要显示多少行 */
			.vipCount {
				font-weight: 700;
				font-size: 36rpx;
			}
		}
		.user-card-bottom-right {
			height: 60rpx;
			line-height: 60rpx;
			margin-right: 30rpx;
			padding: 0 10px;
			font-size: 34rpx;
			background: transparent;
			border: 1px solid #ffffff;
			color: #ffffff;
		}
	}
}
.menu-list {
	width: 85%;
	margin: 0 auto;
	margin-top: 10px;
	.menu-item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		.menu-item-left {
			display: flex;
			align-items: center;
			.menu-item-image {
				width: 34rpx;
				height: 34rpx;
			}
			.menu-item-text {
				margin-left: 10px;
				color: #555555;
				font-size: 34rpx;
			}
		}
	}
}
.btn {
	padding: 0;
	margin: 0;
	background: none;
	border: none;
}
.btn:after {
	content: none;
}

.changeAvatar-item,
.popupUserName-item {
	width: 60%;
	margin: 0 auto;
	text-align: center;
	border-bottom: 1px solid #dddddd;
	line-height: 80rpx !important;
	&.title,
	&.close {
		font-size: 28rpx;
		color: #808080;
	}
	&.close {
		font-size: 30rpx;
		border-bottom: none;
	}
	&.btns {
		display: flex;
		.btn {
			width: 100%;
			color: #000;
		}
	}
	&.input {
		text-align: left;
		height: 80rpx;
		color: #000;
	}
}
.feedBack {
	display: flex;
	justify-content: center;
	color: #007aff;
	margin: 30rpx 0;
	font-size: 30rpx;
}

.popupBg {
	background: #fff;
}
</style>
